import React, {Component} from 'react';
import {connect} from 'react-redux'
import {
    plusAction,
    plusAsyncAction,
    subAction,
    subAsyncAction
} from "@/store/action/count"

import {Input, Button, message,} from 'antd';

class Count extends Component {
    render() {
        const {count} = this.props
        return (
            <div>
                <h2>点赞组件</h2>
                <Input.Group compact>
                    <Button type="primary" onClick={this.add}>点赞</Button>
                    <Button type="primary" onClick={this.addAsync}>同步点赞</Button>
                    <Button type="primary" onClick={this.sub}>举报</Button>
                    <Button type="primary" onClick={this.subAsync}>同步举报</Button>
                    <Input style={{width: 'calc(100% - 500px)'}} value={count}/>
                </Input.Group>
            </div>
        );
    }

    add = () => this.props.plus(1)

    addAsync = async () => {
        const hide = message.loading({content: '点赞+1...'})
        await this.props.plusAsync(1)
        hide();
    }

    sub = () => this.props.sub(1)

    subAsync = async () => {
        const hide = message.loading({content: '点赞-1...'})
        await this.props.subAsync(1)
        hide();
    }

}

const mapStateToProps = (state) => ({count: state.count})
const mapDispatchToProps = {
    plus: plusAction,
    plusAsync: plusAsyncAction,
    sub: subAction,
    subAsync: subAsyncAction
}
export default connect(mapStateToProps, mapDispatchToProps)(Count);
